<?php require_once 'httpFilter.php'; 'conf.php'; ?>
<html>
<title>Reports</title>
<head>
	<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
	

<script type="text/javascript"
	src="http://www.google.com/jsapi?key=ABQIAAAAN5ZtdO4QwxMtTu20xDDGaBRDmw7J9fBy0SHOM2DFag_Hy1S5lhQ5rqB1kcjLa1mWGmKBHM2W7xPDyQ">
</script>


<link rel="stylesheet" type="text/css" href="css/mbContainer.css" title="style"  media="screen"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  
  <script type="text/javascript" src="js/jquery.datePicker-2.1.2.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script>
  <link rel="stylesheet" type="text/css" href="css/datePicker.css" title="style"  media="screen"/>
  
  <style type="text/css">
	select {
	    -moz-border-radius: 4px;
	    -moz-box-shadow: 1px 1px 5px #cfacfcf inset;
	    border: 1px solid #cfcfcf;
	    vertical-align: middle;
	    background-color: transparent;
	}
	option {
	    background-color: #fef5e6;
	    border-bottom: 1px solid #ebdac0;
	    border-right: 1px solid #d6bb86;
	    border-left: 1px solid #d6bb86;
	}
	option:hover {
	    cursor: pointer;
	}
 </style>

<script type="text/javascript" src="reports.js"></script>
<script type="text/javascript" src="js/utils.js">
</script>
</head>
<body>
<div id="loadingPic" style="display: none; position:absolute; left: 0px; top:0px; height:100%; width: 100%; text-align: center;
	           background-image:url('images/translucent.gif'); z-index: 1000;">
<img src="images/loading2.gif" style="margin: 12%"/>
</div>

<?php include("includes/navigation.php"); ?>
<table id="mytable" cellspacing="0" summary="August 2010 Budget">
	<caption>"Getting Rich Slowly"</caption>
	<tr>
	    <th scope="col" colspan="5"> Reports View</th>
	  </tr>
</table>
<br/>
<table width="700">
	<tr>
		<td valign="top" class="spec">
			<fieldset><legend>Filtering</legend>
				<div>
					<span>Report Type:</span>
					<span>
						<select id="reportType">
							<option value="incomeAndExpense">Income & Expenses</option>
							<option value="categories">Categories</option>
						</select>
					</span>			
				</div>
				<br/>
				<div>
					<span>From:</span>
					<span><input id="fromDate" type="text" class="currency"/></span>
					&nbsp;
					<span>To:</span>
					<span><input id="toDate" type="text" class="currency"/></span>
					&nbsp;&nbsp;
					<span><a href="#" onclick="fetchData();"><img src="images/search.png" width="30" border="0"></img> </a></span>
				</div>
				
				
			</fieldset>
		</td>
	</tr>
</table>
<br/>
<table cellpadding="0" cellspacing="0" id="incomeAndExpenseTbl" width="700" style="display: none;">
	<tr>
	    <th scope="row" colspan="3" class="spec">
	    	Income
	    </th>
	  </tr>
	  <tr id="incomeHeader">
	    <th scope="col" width="100">Date</th>
	    <th scope="col">Description</th>
	    <th scope="col" width="100">Amount</th>
	  </tr>
	  <tr></tr>
	  	<th class="nobg" colspan="2">&nbsp;</th>
	  	<td class="total">R <label id="incomeTotal">0</label></td>
	  </tr>
	 <tr>
		<th colspan="3" class="nobg">&nbsp;</th>
	</tr>
	  <tr>
	    <th scope="row" colspan="3" class="spec">
	    	Expenses
	    </th>
	  </tr>
	  <tr id="expenseHeader">
	    <th scope="col" width="100">Date</th>
	    <th scope="col">Description</th>
	    <th scope="col" width="100">Amount</th>
	  </tr>
	  <tr></tr>
	  	<th class="nobg" colspan="2">&nbsp;</th>
	  	<td class="total">R <label id="expenseTotal">0</label></td>
	  </tr>
</table>

<table cellpadding="0" cellspacing="0" id="categoriesTbl" width="700" style="display: none;">
	<tr>
	    <th scope="row" colspan="3" class="spec">
	    	Income
	    </th>
	  </tr>
	  <tr id="categoriesIncomeHeader">
	    <th scope="col">Description</th>
	    <th scope="col" width="100">Amount</th>
	  </tr>
	  
	  <tr>
	    <th scope="row" colspan="3" class="spec">
	    	Expenses
	    </th>
	  </tr>
	  <tr id="categoriesExpenseHeader">
	    <th scope="col">Description</th>
	    <th scope="col" width="100">Amount</th>
	  </tr>
</table>

<div id="budgetItemTransactionsDiv" style="display: none;">
	<table  width="100%" cellpadding="0" cellspacing="0">
		<tr id="budgetItemTransHeaderRow">
			<th>date</th>
			<th>description</th>
			<th>Amount</th>
		</tr>
		<tr>
			<th scope="row" class="nobg" colspan="2">&nbsp;</th>
			<td class="total" id="total"></td>
		</tr>
	</table>
</div>

<?php include("includes/footer.php"); ?>
</body>
</html>